<template>
    <div class="barChart">
        <Echarts
            autoresize
            ref="lines"
            class="lines"
            :option="option"></Echarts>
    </div>
</template>
<script>
import Echarts from "vue-echarts";
export default {
    data() {
        return {
            option: {
                tooltip: {
                    show: true,
                    trigger: "axis",
                    backgroundColor: "rgba(31, 45, 61, .75)",
                    borderColor: "rgba(31, 45, 61, .75)",
                    textStyle: {
                        color: "#fff"
                    },
                    padding: [5, 10],
                    axisPointer: {
                        type: "none"
                    },
                    formatter: function(params) {
                        console.log(params, "ssssssssssss")
                        if(!params) return;
                        let detail = `<div style="width: 180px;height: 50px"><div style="font-size: 14px">北京市 ${params[0].name}</div>`
                        params.forEach(item => {
                            detail += `<div>
                                
                                <span style="background: ${item.color?.colorStops[0]?.color || '#4188F3'};
                                            font-size: 12px;display: 
                                            inline-block;
                                            width: 8px;
                                            height: 8px; 
                                            border-radius: 2px;
                                            margin-right: 5px"></span>
                                <span style="font-size: 12px;color: #fff">${item?.seriesName || ''}: ${item?.data || 0}${item?.unit || '元'}</span>
                            </div>`
                        })
                        detail += "</div>";
                        return detail;
                    }
                },
                color: ['#49A0F6', '#655FE0', '#1799C2'],
                legend: {
                    type: "plain",
                    show: true,
                    right: 0,
                    top: 10,
                    itemGap: 16, //图例各项之间的间距，
                    itemWidth: 8,
                    itemHeight: 8,
                    selectedMode: false,
                    textStyle: {
                        color: "#909399",
                        fontSize: 12
                    },
                    icon: "roundRect"

                },
                grid: {
                    left: 30,
                    top: 40,
                    bottom: 30,
                    right: 10
                },
                xAxis: {
                    show: true,
                    data: ['2014', "2015", "2016", "2017", "2018", "2019"],
                    axisLine: {
                        lineStyle: {
                            color: "#E8E8E8"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#909399",
                    },
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "#0160C0",
                            opacity: 0.1,
                        }
                    }

                },
                 
                yAxis: {
                    show: true,
                    type: "value",
                    name: "单位：元",
                    nameTextStyle: {
                        align: "center"
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: "#909399",
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#F0F0F0"
                        }
                    }
                },
                series: [
                    {
                        name: "人均费用支出",
                        type: "bar",
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 2,
                        data: [10, 10, 30, 12, 15, 3, 7],
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#4188F3' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#4DAAF7' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            borderRadius: 5
                        },
                        barWidth: 10,
                        animation: true,
                        smooth: true
                    },
                ]
            }
        }
    },
    components: {
        Echarts
    }
}
</script>
<style lang="less" scoped>
.barChart {
    width: 100%;
    height: 50%;
    margin-top: 5px;
}
</style>